<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link href="lib/bootstrap.css" rel="stylesheet">
	</head>

	<body>
		<div class="container">
			<div class="panel panel-primary">
				<div class="panel-heading">
					<h3 class="panel-title">添加品牌</h3>
				</div>
				<div class="panel-body form-inline">
					<lebel>
						id: <input type="text" class="form-control" v-model='id'/>
					</lebel>
					<lebel>
						name: <input type="text"  class="form-control" @keyup.f2="add" v-model="name"/>
					</lebel>
					<input type="button" class="btn btn-primary" value="添加" @click="add"/>
					<label>
						搜索关键字：
						<input type="text" v-focus   v-color="'blue'" class="form-control" v-model="keyword"/>
					</label>
				</div>
			</div>
			<table class="table table-bordered table-hover table-striped">
				<thead>
					<tr>
						<th>id</th>
						<th>name</th>
						<th>ctime</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="item in search(keyword)" :key="item.id">
						<td>{{item.id}}</td>
						<td>{{item.name}}</td>
						<td>{{item.ctime | time}}</td>
						<td><a href="#" @click.prevent="del(item.id)">删除</a></td>
					</tr>
				</tbody>
			</table>
		</div>
		<div id="app">
			<h3 v-fontweight="'200'">{{dt | dateFormat}}</h3>
		</div>
		<script src="lib/vue.js"></script>
		<script type="text/javascript">
			//自定义一个私有过滤器
			var app = new Vue({
				el:'#app',
				data:{
					dt:new Date(),
				},
				methods:{
					
				},
				filters:{//自定义私有过滤器  有两个条件【过滤器名称   处理函数】
					dateFormat:function(date){
						let dt = new Date(date);//根据字符串得到特定时间
						let y = dt.getFullYear();
						let m = (dt.getMonth() + 1).toString().padStart(2,'0');
						let d = (dt.getDate()).toString().padStart(2,'0');
						let h = (dt.getHours()).toString().padStart(2,'0');
						let min = (dt.getMinutes()).toString().padStart(2,'0');
						let s = (dt.getSeconds()).toString().padStart(2,'0');
						return `${y}-${m}-${d} ${h}:${min}:${s}`
					}
				},
				directives:{//之定义私有指令
					'fontweight':{
						bind:function(el,binding){
							el.style.fontWeight = binding.value;
						}
					}
				}
			})
			//过滤器中的function，第一个参数，永远都是管道符号前面传递过来的
			//全局过滤器
			Vue.filter('time',function(date){//时间的格式化
				let dt = new Date(date);//根据字符串得到特定时间
				let y = dt.getFullYear();
				let m = dt.getMonth() + 1;
				let d = dt.getDate();
				let h = dt.getHours();
				let min = dt.getMinutes();
				let s = dt.getSeconds();
				return `${y}-${m}-${d} ${h}:${min}:${s}`
			})
			//自定义全局按键修饰符
			Vue.config.keyCodes.f2 = 113;
			//使用vue.directive()定义全局的指令
			//其中：参数1指令名称，在定义的时候，指令的名称前面，不需要加v-；在调用的时候必须在指令名称前加v-
			//参数2：是一个对象，有一些指令相关的函数，函数在特定阶段可以
			Vue.directive('focus',{
				bind:function(el){//每当指令绑定到元素上的时候，会立即执行之歌bind函数，只执行一次
					//在每个函数中，第一个参数，永远是el，表示被绑定了指令的那个元素
					//在元素刚绑定了指令的时候还没有插入到DOM中去，这个时候调用focus方法没有作用；一个元素只有插入DOM之后才会获取焦点
					el.focus()
				},
				inserted:function(el){//插入到DOM中的时候，会立即执行，只触发一次
					el.focus()
				},
				updated:function(){//当更新的时候回执行，可能会触发多次
					
				}
			})
			//自定义设置字体颜色的指令
			Vue.directive('color',{
				//样式只要通过指令绑定给了元素，不管这个元素有没有被插入到页面中，这个元素肯定有了一个内联样式
				//将来元素 显示到页面中，浏览器渲染引擎会解析样式
				bind:function(el,binding){
					el.style.color = binding.value;
				},
				/*inserted:function(el){
					el.focus()
				},
				updated:function(){
					
				}*/
			})
			var vm = new Vue({
				el: ".container",
				data:{
					list:[
					{id:1,name:'宝马',ctime:new Date()},
					{id:2,name:'奔驰',ctime:new Date()},
					],
					name:'',
					id:'',
					keyword:''
				},
				methods: {
					add(){
						let that = this;
						let car = {id:that.id,name:that.name,ctime:new Date()};
						that.list.push(car)
						that.id = '';
						that.name = ''
					},
					del(id){
						/*this.list.some((item,i)=>{
							if(item.id == id){
								this.list.splice(i,1)
								return true;
							}
						})*/
						let index = this.list.findIndex(item=>{
							if(item.id == id){
								return true;
							}
						})
						this.list.splice(index,1)
					},
					search(keyword){
						/*var newList = [];
						this.list.forEach(item=>{
							if(item.name.indexOf(keyword) != -1){
								newList.push(item)
							}
						})
						return newList;*/
						return this.list.filter(item=>{
							//es6为字符串提供一个新方法，includes（要包含的字符串）
							if(item.name.includes(keyword)){
								return item;
							}
						})
					}
				}
			})
		</script>
	</body>

</html>